<template>
    <div style="padding: 0 17px">
        <Breadcrumb/>
        <div style="margin-top: 20px">
            <el-button type="primary" style="margin-right: 15px" @click="addItem">添加状态</el-button>
            <el-input v-model="search" placeholder="请输入状态名"
                      style="width: 200px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
            <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
            </el-button>
        </div>
        <div>
            <el-table :data="tableData" :row-style="{ height: '77px' }" border style="width: calc(100vw - 240px);margin-top: 20px;height: 70vh;color: #909399;font-size: 15px;">
                <el-table-column prop="id" label="ID" width="100"/>
                <el-table-column prop="warnStateNum" label="状态编号" width="150"/>
                <el-table-column prop="warnStateName" label="状态名称" width="auto"/>
                <el-table-column align="center" label="操作" fixed="right" width="170">
                    <template v-slot="scope">
                        <el-button type="primary" size="small" icon="Edit" @click="editItem(scope.row)">编辑</el-button>
                        <el-button v-if="this.userInformation.role === 1" type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :page-sizes="[10, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
        <el-dialog :close-on-click-modal="false" v-model="operationItemDialog" title="报警状态操作" width="700">
            <el-form :model="form" :rules="rules" ref="form" label-position="right" class="demo-roleForm">
                <el-form-item label="状态编号" prop="warnStateNum">
                    <el-input v-model="form.warnStateNum" class="input-size" placeholder="状态编号"></el-input>
                </el-form-item>
                <el-form-item label="状态名称" prop="warnStateName">
                    <el-input type="textarea" v-model="form.warnStateName" class="input-size" placeholder="状态名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="font-size: 12px" type="primary" @click="submitForm('form')">提交</el-button>
                    <el-button style="font-size: 12px;color: #606266" @click="reset('form')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import request from "@/utils/request.js";
    import Breadcrumb from "@/components/Breadcrumb.vue";

    export default {
        name: "WarnState",
        components: {Breadcrumb},
        data() {
            return{
                operationItemDialog: false,
                userInformation:JSON.parse(localStorage.getItem("user")),
                tableData:[],
                search:"",
                rules: {
                    name: [
                        {required: true, message: '请输入编号', trigger: 'blur'},
                    ],
                    explanation: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                    ],
                },
                form:{},
                currentPage: 1,
                pageSize: 10,
                total: 10,
            }
        },
        created() {
            this.load()
        },
        methods: {
            // 添加
            addItem(){
                this.operationItemDialog = true;
            },
            // 编辑
            async editItem(scope) {
                Object.assign(this.form, scope)
                this.operationItemDialog = true
            },
            // 提交
            submitForm(val){
                this.$refs[val].validate((valid) => {
                    if (valid) {
                        request.post("/warn-state/edit",this.form).then(res=>{
                            if (res.code==='200'){
                                this.operationItemDialog=false
                                this.$message({
                                    message:"成功",
                                    type:"success"
                                })
                                this.load()
                            }else {
                                this.$message.error("操作失败"+res.msg)
                            }
                        })
                    }
                })
            },
            // 取消
            reset(val){
                this.operationItemDialog = false;
                this.form={};
                this.$refs[val].resetFields();
            },
            handleSizeChange(pageSize) {   // 改变当前每页的个数触发
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {  // 改变当前页码触发
                this.currentPage = pageNum
                this.load()
            },
            // 删除
            deleteItem(scope){
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.get("/warn-state/delete/"+scope).then(res=>{
                        if (res.code==='200'){
                            this.$message.success("成功")
                            this.load()
                        }else {
                            this.$message.error("删除失败，"+res.msg)
                        }
                    })
                });
            },
            // 搜索及初始化
            load(){
                this.form = {}
                this.defaultCheckedKeys=[]
                request.get("/warn-state/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize+"&name="+this.search).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "records") {
                                this.tableData = res.data[key];
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        this.$message.error("错误"+res.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    :deep(.el-table th .cell)  {
        font-weight: 700
    }
    :deep(.el-form-item__label) {
        font-size: 14px;
        font-weight: 700
    }
    .input-size {
        font-size: 13px;
    }
</style>
